<template>
	<view :class="['td-cube-small', color ? 'td-cube-small-' + color : (!value ? 'td-cube-small-disabled' : '')]" :style="cssVars">
		<view class="value">{{value}}</view>
		<image class="st st-sig" v-if="cmpSg(index)" src="../../static/img/small-single.png" mode="widthFix"></image>
		<image class="st st-lf-01" v-if="cmpLf01(index)" src="../../static/img/small-left.png" mode="widthFix"></image>
		<image class="st st-lf-02" v-if="cmpLf02(index)" src="../../static/img/small-left.png" mode="widthFix"></image>
		<image class="st st-rg-01" v-if="cmpRg01(index)" src="../../static/img/small-right.png" mode="widthFix"></image>
		<image class="st st-rg-02" v-if="cmpRg02(index)" src="../../static/img/small-right.png" mode="widthFix"></image>
		<view class="s-cube">
			<ul>
				<li class="front">1</li>
				<li class="back">2</li>
				<li class="top">3</li>
				<li class="bottom">4</li>
				<li class="left">5</li>
				<li class="right">6</li>
			</ul>
		</view>
		<view class="s-cube s-cube2">
			<ul>
				<li class="front">1</li>
				<li class="back">2</li>
				<li class="top">3</li>
				<li class="bottom">4</li>
				<li class="left">5</li>
				<li class="right">6</li>
			</ul>
		</view>
		<view class="index">{{index}}</view>
	</view>
</template>

<script>
	import props from './props.js';
	export default {
		name: "cube-small",
		mixins: [uni.$u.mixin, props],
		data() {
			return {
				cssVars: '--scaleY: 1'
			};
		},
		created() {
			let value = this.value
			if (value <= 0) {
				value = 0
			}
			if (value >= 5) {
				value = 5
			}
			this.cssVars = `--scaleY: ${(value / 5).toFixed(2)};`
		},
		methods: {
			cmpSg(index) {
				return index % 12 === 0 ||  index === 1 ||  index === 13 ||  index === 25
			},
			cmpLf01(index) {
				return index % 2 === 1;
			},
			cmpLf02(index) {
				return index % 12 !== 0 && index % 2 === 0;
			},
			cmpRg01(index) {
				// return !(index % 12 === 0 ||  index === 1 ||  index === 13 ||  index === 25) && index % 2 === 1;
				return index % 2 === 1;
			},
			cmpRg02(index) {
				// return !(index % 12 === 0 ||  index === 1 ||  index === 13 ||  index === 25) && index % 2 === 0;
				return index % 12 !== 0 && index % 2 === 0;
			},
		}
	}
</script>

<style lang="scss" scoped>
	$width: 35rpx;
	$height: 100rpx;
	$length: 400rpx;

	.td-cube-small {
		width: $width;
		height: $height;
		position: relative;
		margin-left: 18rpx;
		display: inline-block;
        float: left;
		font-size: 12px;
		padding: 35px 0 45px;
		.value{
			position: absolute;
			top: 0;
			left: calc(50% - 5px);
			width: 150%;
			text-align: center;
			font-size: 12px;
		}
		.index{
			position: absolute;
			bottom: 0;
			left: calc(-100% + 5px);
			width: 100%;
			text-align: center;
		}
		.st {
			width: 25rpx;
			height: auto;
			position: absolute;
			z-index: 2;
		}

		.st-sig {
			left: -6rpx;
			top: 70rpx;
		}

		.st-lf-01 {
			width: 35rpx;
			left: 22rpx;
			top: 45rpx;
			transform: scale(0.9);
		}
		
		.st-rg-01 {
			width: 35rpx;
			left: 60rpx;
			top: 45rpx;
			transform: scale(0.9);
		}
		
		
		.st-lf-02 {
			width: 35rpx;
			left: -2rpx;
			top: 70rpx;
			transform: scale(1.05);
		}
		
		.st-rg-02 {
			width: 35rpx;
			left: 30rpx;
			top: 70rpx;
			transform: scale(1.05);
		}

		.s-cube {
			position: absolute;
			left: 0;
			right: 0;
			width: $width;
			height: $height;
			perspective: 1300px;
			perspective-origin: 900% -300%;
		}

		ul {
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			transform: none;
			top: 50%;
			left: 50%;
		}

		li {
			display: flex;
			position: absolute;
			justify-content: center;
			align-items: center;
			width: $width;
			height: $height;
			opacity: .8;
			font-size: 50px;
			color: transparent;
			background-color: rgba(#35b7eb, 0.2);
			// border: 1rpx solid #ace0f7;
			box-shadow: inset 0 0 1px rgba(blue, 0.8);
			box-sizing: content-box;
		}


		.front {
			transform: translate(-50%, -50%) rotateY(0deg) translateZ($length / 2);
		}

		.back {
			transform: translate(-50%, -50%) rotateY(180deg) translateZ($length / 2);
		}

		.top {
			height: $length !important;
			transform: translate(-50%, -50%) rotateX(90deg) translateZ($height / 2);
		}

		.bottom {
			height: $length !important;
			transform: translate(-50%, -50%) rotateX(-90deg) translateZ($height / 2);
		}

		.left {
			width: $length !important;
			height: $height !important;
			transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
		}

		.right {
			width: $length !important;
			height: $height !important;
			transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
		}


		.s-cube2 ul {
			transform: scaleX(1) scaleY(var(--scaleY)) scaleZ(1);
		}

		.s-cube2 ul li {
			border: 0 !important;
		}

		.s-cube2 .front {
			background: #35b7eb !important;
			opacity: 1!important;
		}

		.s-cube2 .top {
			background: linear-gradient(45deg, #fff, #0a84c7) !important;
			opacity: 1!important;
		}

		.s-cube2 .right {
			background: #0a84c7 !important;
			opacity: 1!important;
		}
	}
	
	.td-cube-small-danger {
		.value, .index{
			color: #d23473;
		}
		.s-cube2 .front {
			background: #e2809d !important;
		}
		
		.s-cube2 .top {
			background: linear-gradient(45deg, #fff, #d23473) !important;
		}
		
		.s-cube2 .right {
			background: #d23473 !important;
		}
	}
	
	.td-cube-small-waring {
		.value, .index{
			color: #c9ad3b;
		}
		.s-cube2 .front {
			background: #e5d99f !important;
		}
		
		.s-cube2 .top {
			background: linear-gradient(45deg, #fff, #c9ad3b) !important;
		}
		
		.s-cube2 .right {
			background: #c9ad3b !important;
		}
	}
	
	.td-cube-small-disabled {
		.value, .index{
			color: #999;
		}
		.s-cube2 .front {
			background: #999 !important;
		}
		
		.s-cube2 .top {
			background: linear-gradient(45deg, #fff, #999) !important;
		}
		
		.s-cube2 .right {
			background: #999 !important;
		}
	}
</style>